<template>
  <div id="wrap">
    <!--返回顶部按钮-->
    <Scrolltop></Scrolltop>

    <!--头部-->
    <div class="top">

      <img @click="goback()" src="../../../static/bmqd/BMQD-1.png" alt="">

      <span>{{title}}</span>
      <img src="../../../static/bmqd/fenxiang.png" alt="">
    </div>

    <img class="con-img" src="../../../static/nvhanzi/ns.png" />
    <div class="text-info">
      <h3>A<img src="../../../static/nvhanzi/D.png">DICTION</h3>
      <h6>BY   AYAKO</h6>
      <p>ADDICTION专为追求自我风格的各年龄层女性而设 ,<br><strong>由NARS的前彩妆总监Ayako掌舵。</strong><br>每件单品都以崭新的色彩和CHIC的包装呈现 ,<br>质感奢华 , 宛如定制。<br>上市以来已获得35项彩妆奖项 ,<br> 是日本杂志和化妆师力荐品牌。</p>
    </div>

    <div class="con-wrap" v-for="i in arr">
      <img class="con-top-img1" :src="i.url" alt="">
      <img class="con-top-img2" :src="i.url1" alt="">

      <div class="con-bot">
        <p><span>{{i.span}}</span>{{i.tit}}</p>
      </div>
    </div>

    <div class="bot" v-for="item in arr1">
      <div class="bot-left">
        <img :src="item.url2" />
      </div>
      <div class="bot-right">
        <h4>{{item.text}}</h4>
        <p>
          <span>{{item.price}}</span>
          <button class="btn">立即购买</button>
        </p>
      </div>
    </div>
    <p class="more">加载更多</p>
    <p class="nomore">没有更多了...</p>

  </div>
</template>

<script>
  import Scrolltop from './Scrolltop'
    export default {
        name: "Miji",
      data(){
          return{
            title:'女汉子到女神的蜕变',
            arr:[
              {url:require('../../../static/nvhanzi/nv-2.png'),
                url1:require('../../../static/nvhanzi/nv-5.png'),
                span:'ADDICTION单色眼影@cosme 2016综合大赏、 2016眼影部门第1位。',
                tit:'一直是超热产品，色卡图案 简直是看得人眼花缭乱，但是却没有一款是多余的。 色彩饱和度高，易上色，在肌肤上显色鲜亮饱满。粉 质软弱易晕染，颜色均匀不结块。可以自由组合配色 初化眼影的人参考官网的专业配色也可以轻松驾驭。'},
              {url:require('../../../static/nvhanzi/nv-4.png'),
                url1:require('../../../static/nvhanzi/nv-5.png'),
                span:'日本商场销售冠军和杂志排名第一，也被博主们称为“少女粉脸颊立马拥有”',
                tit:'的液体腮红。质地非常水润，延展性非常好，不会留印，妆感自然。先上粉饼再用这款腮红，d底妆和颊彩依然能均匀融合。皮肤透出来的感觉，到晚上也不会暗沉变色。'}
            ],
            arr1:[
              {url2:require('../../../static/nvhanzi/nv-1.png'),text:'ADDDICTION  魅力单色眼影',price:'￥29.9'},
              {url2:require('../../../static/nvhanzi/nv-3.png'),text:'ADDDICTION  液体腮红&高光   12ml',price:'￥29.9'}
            ]
          }
      },
      components:{
        Scrolltop
      },
      methods:{
        goback(){
          window.history.go(-1);
        }
      }
    }
</script>

<style scoped>
  #wrap{
    background: #f2f2f2;
  }
  .top{
    width: 69rem;
    height: 3rem;
    line-height: 3rem;
    padding: 3.5rem 1.5rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .top span{
    font-size: 3.6rem;
    color: #fff;
  }
  .top img{
    width: 3rem;
    height: 3rem;
  }

  .text-info{
    width: 72rem;
    height: 36rem;
    background: #fff;
    margin-bottom: 2rem;
    text-align: center;
    padding-top: 6rem;
  }
  .text-info h3{
    font-size: 4.8rem;
    color: #4d4d4d;
  }
  .text-info h3 img{
    width: 3rem;
    height: 3.7rem;
  }
  .text-info h6{
    font-size: 1.6rem;
    color: #4d4d4d;
    margin-bottom: 4rem;
  }
  .text-info p{
    font-size: 2.8rem;
    color: #4d4d4d;
  }

  .con-wrap{
    width: 68rem;
    height: 75rem;
    padding: 1rem 2rem;
    border-bottom: .1rem solid #ccc;
    margin-bottom: 1rem;
    background: #fff;
  }
  .con-img{
    width: 72rem;
    height: 40rem;
    vertical-align: middle;
  }
  .con-top-img1{
    width: 100%;
    height: 41rem;
    vertical-align: bottom;
  }
  .con-top-img2{
     width: 100%;
     height: 8rem;
     vertical-align: bottom;
    margin-bottom: 1rem;
   }
  .con-bot{
    width: 64rem;
    background: #f2f2f2;
    border-radius: 2rem;
    padding: 2rem;
  }
  .con-bot p{
    font-size: 2.6rem;
    color: #4d4d4d;
  }
  .con-bot p span{
    color: #eb7874;
  }

  .bot{
    width: 69rem;
    height: 16rem;
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    border-bottom: .1rem solid #ccc;
    background: #fff;
  }
  .bot-left{
    width: 18rem;
    height: 100%;
  }
  .bot-left img{
    width: 100%;
    height: 100%;
  }
  .bot-right{
    width: 49rem;
    height: 100%;
  }
  .bot-right h4{
    width: 39rem;
    height: 9rem;
    font-size: 2.8rem;
    color: #4d4d4d;
  }
  .bot-right p{
    display: flex;
    justify-content: space-between;
  }
  .bot-right p span{
    display: inline-block;
    font-size: 2.8rem;
    color: #e53e42;
  }
  .bot-right p .btn{
    width: 20rem;
    height: 4rem;
    background: #e53e42;
    border-radius: 2rem;
    color: #fff;
    font-size: 1.8rem;
  }

  .more{
    font-size: 2.4rem;
    color: #808080;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }
  .nomore{
    font-size: 2.4rem;
    color: #808080;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
    display: none;
  }
</style>
